<template>
  <div class="container">
    <div class="main"><router-view></router-view></div>
    <div class="sider-bar">
      <div v-for="(item, index) in mdRouter" :key="index">
        <router-link :to="/doc/ + item.path">{{ item.meta.title }}</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
  import "highlight.js/styles/github-dark.css";
  import hljs from "highlight.js";
  import { ref, watch, nextTick, onMounted } from "vue";
  import { useRoute } from "vue-router";
  import router from "@router/index.js";
  // 获取子路由列表
  const mdRouter = ref(router.options.routes[2].children);

  // 首次代码高亮
  nextTick(() => {
    let IsHighlighted =
      document.querySelector("div > pre > code").dataset.highlighted;
    console.log(IsHighlighted, "example");
    if (IsHighlighted === undefined) {
      hljs.highlightAll();
    }
  });
  const route = useRoute();
  watch(
    () => route.path,
    () => {
      setTimeout(() => {
        hljs.highlightAll();
      }, 100);
    }
  );
</script>

<style lang="scss">
  // 阅读器布局

  .container {
    width: 100%;
    height: 100vh;
    display: flex;
    background-color: #fafafa;
  }

  // 左侧菜单
  .sider-bar {
    display: flex;
    width: 210px;
    padding-top: 48px;
    flex-direction: column;
    font-family: "HarmonyOSSans";

    // 菜单项样式
    div {
      a {
        display: block;
        height: 20px;
        padding: 10px 16px;
        color: #5f6165;
        font-size: 16px;
        font-weight: 550;
        text-decoration: none;
        &:hover {
          cursor: pointer;
          color: #409eff;
          opacity: 0.8;
        }
      }
      .router-link-active {
        color: #409eff;
        background-color: #ebf5ff;
        border-radius: 8px;
        &:hover {
          cursor: default;
          opacity: 1;
        }
      }
    }
  }

  // MD渲染区域
  .main {
    flex: 1;
  }

  // MD渲染样式
  .markdown-body {
    // 距离左侧menu宽度
    padding-left: 50px;

    // ＃1到#5标题样式
    h1 {
      font-size: 28px;
      margin-top: 38px;
      margin-bottom: 19px;
    }
    h2 {
      font-size: 24px;
      margin-top: 34px;
      margin-bottom: 17px;
    }
    h3 {
      font-size: 20px;
      margin-top: 30px;
      margin-bottom: 15px;
    }
    h4 {
      font-size: 18px;
      margin-top: 26px;
      margin-bottom: 13px;
    }
    h5 {
      font-size: 14px;
      margin-top: 24px;
      margin-bottom: 12px;
    }

    // 普通文本段落样式
    p {
      line-height: 28px;
      font-family: "HarmonyOSSans";

      // 代码行样式
      code {
        padding: 2px 4px;
        margin: 1px 2px;
        font-size: 95%;
        border-radius: 2px;
        color: #262626;
        background-color: #e7e9e8;
      }
    }

    // 无序列表样式
    ul {
      padding-bottom: 4px;
      font-family: "HarmonyOSSans";
      li {
        line-height: 24px;
      }
    }
    code {
      border-radius: 4px;
    }
  }
</style>
